<template>
    <div v-if="folderStore.showRightMenu" class="right-menu" @click="rightMenuClick">
        <ul
            class="right-menu-list"
            :style="{
                left: folderStore.rightMenuX + 5 + 'px',
                top: folderStore.rightMenuY + 5 + 'px'
            }">
            <li v-for="menu in rightMenuList" :key="menu.key" @click="command(menu)">
                {{ menu.label}}
            </li>
        </ul>
    </div>

    <div v-if="folderStore.showGlobalRightMenu" class="right-menu right-core-global" @click="rightGlobalMenuClick">
        <ul
            class="right-menu-list"
            :style="{
                left: folderStore.rightMenuX + 5 + 'px',
                top: folderStore.rightMenuY + 5 + 'px'
            }">
            <li v-for="menu in rightMenuGlobalList" :key="menu.key" @click="command(menu)">
                {{ menu.label}}
            </li>
        </ul>

    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useFolderStore } from '../../store/folder'
import { mapperEndSlask } from '../../utils/folder'

const folderStore = useFolderStore()

const rightMenuList = ref([
    {
        label: '打开',
        key: 'open',
        event: 'getFolderInfo',
    },
    {
        label: '删除',
        key: 'delete',
    },
    {
        label: '重命名',
        key: 'rename',
    },
    {
        label: '复制',
        key:'copy',
    },
    {
        label: '粘贴',
        key:'paste',
    },
    {
        label: '移动',
        key:'move',
    },
    {
        label: '分享',
        key:'share',
    },
    {
        label: '属性',
        key:'property',
    },
])

const rightMenuGlobalList = ref([
    {
        label: '新建文件夹',
        key: 'newFolder',
    },
    {
        label: '新建多个文件夹',
        key: 'newFolder',
    },
    {
        label: '刷新',
        key:'refresh',
    },
    {
        label: '直达首页',
        key:'fastHome',
    },
])

const rightMenuClick = (e: MouseEvent) => {
    e.stopPropagation()
    folderStore.showRightMenu = false
}

const rightGlobalMenuClick = (e: MouseEvent) => {
    e.stopPropagation()
    folderStore.showGlobalRightMenu = false
}

const command = (item: any) => {
    const nextPath = mapperEndSlask(folderStore.activePath) + folderStore.rightHoverItem.name

    switch (item.key) {
        case 'open':
            folderStore.getFolderInfo(nextPath, true)
            break;
        case 'new':

            break;
        case 'delete':

            break;
        case 'rename':
            const _i = folderStore.rightHoverItem.$index
            folderStore.folderInfo[_i].isRename = true
            setTimeout(() => {
                const folderName = document.querySelector('.folder-name-input') as HTMLDivElement
                if (folderName) {
                    const folderNameInput = folderName.getElementsByTagName('input')
                    if (folderNameInput) {
                        folderNameInput[0].focus()
                    }
                }
            }, 100)
            break;
        case 'copy':

            break;

    }
    console.log(folderStore.activePath, folderStore.rightHoverItem.name)
    console.log(nextPath, 'nextPath')
}

</script>

<style lang="less" scoped>
.right-menu {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transition: all 0.25s;
    background: rgba(0, 0, 0, 0.05);
    ul {
        position: absolute;
        width: 130px;
        height: auto;
        padding: 10px 0;
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 0 25px 2px #ccc;
        transition: all 0.25s;

        li {
            font-size: 12px;
            padding: 5px 15px;
            cursor: pointer;
            &:hover {
                color:rgb(45, 98, 255);
                background: #eee;
            }
        }
    }
}
</style>
